<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../fonts/style.css" />
<link rel="stylesheet" href="../fonts/iconfont.css" />
</head>
<body>
	<div id="app">
		<div class="container">
			<simple-grid :data-list="gridData" :columns="gridColumns">
			</simple-grid>
		</div>
		<div class="container">
			<div class="form-group">
				<button @click="this.show = true">Create</button>
			</div>
		</div>

		<modal-dialog v-bind:show.sync="show"> <header
			class="dialog-header" slot="header">
		<h1 class="dialog-title">Create New Customer</h1>
		</header>

		<div class="dialog-body" slot="body">
			<div v-show="item.id" class="form-group">
				<label>Id</label> <input type="text" v-model="item.id"
					disabled="disabled" />
			</div>
			<div class="form-group">
				<label>city</label> <input type="text" v-model="item.city" />
			</div>

			<div class="form-group">
				<label>province</label> <input type="text" v-model="item.province" />
			</div>


			<div class="form-group">
				<label></label>
				<button @click="createCustomer">Save</button>
			</div>
		</div>
		</modal-dialog>
	</div>

	<template id="grid-template">
	<table>
		<thead>
			<tr>
				<th v-for="col in columns">{{ col.name | capitalize}}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(index,entry) in dataList">
				<td v-for="col in columns">{{ entry[col.name] }}</td>
			</tr>
		</tbody>
	</table>
	</template>

	<template id="dialog-template">
	<div class="dialogs">
		<div class="dialog" v-bind:class="{ 'dialog-active': show }">
			<div class="dialog-content">
				<div class="close rotate">
					<span class="iconfont icon-close" @click="close"></span>
				</div>
				<slot name="header"></slot>
				<slot name="body"></slot>
				<slot name="footer"></slot>
			</div>
		</div>
		<div class="dialog-overlay"></div>
	</div>
	</template>

	<script src="../js/vue.js"></script>
	<script src="../js/vue-resource.js"></script>
	<script>
			Vue.component('simple-grid', {
				template: '#grid-template',
				props: ['dataList', 'columns']
			})

			Vue.component('modal-dialog', {
				template: '#dialog-template',
				props: ['show'],
				methods: {
					close: function() {
						this.show = false
					}
				}
			})
		</script>
	<script>
			var demo = new Vue({
				el: '#app',
				data: {
					show: false,
					gridColumns: [{
						name: 'id',
						isKey: true
					}, {
						name: 'city'
					}, {
						name: 'province'
					}],
					gridData: [],
					apiUrl: '${pageContext.request.contextPath}/address{/id}',
					item: {}
				},
				ready: function() {
					this.getCustomers()
				},
				methods: {
					closeDialog: function() {
						this.show = false
					},
					getCustomers: function() {

						var resource = this.$resource(this.apiUrl)
							vm = this

						resource.get()
							.then((response) => {
								vm.$set('gridData', response.data)
							}).catch(function(response) {
								console.log(response)
							})
					},
					createCustomer: function() {
						var resource = this.$resource(this.apiUrl)
							vm = this.resource.save(vm.apiUrl, vm.item)
							.then((response) => {
								vm.$set('item', {})
								vm.getCustomers()
							})
						this.show = false
					}
				}
			})
		</script>
</body>
</html>